import PropTypes from 'prop-types';
import React , {Component} from 'react';

class CreateComment extends Component{
  static propTypes = {
    post: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
  };
  constructor(props) {
    super(props);
    this.state = {
      content: '',
    }
    this.handleCommentUpdate = this.handleCommentUpdate.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleCommentUpdate(e){
    const content = e.target.value;
    this.setState(() => ({content}));
  }
  handleSubmit(event){
    if (this.state.content === '') return;
    const { post , user } = this.props;
    event.preventDefault();
    this.props.handleSubmit({
      userId: user.id,
      postId: post.id,
      content: this.state.content.trim()
    });
    this.setState(() => ({content: ''}));
  }

  render() {
    return (
        <form className="create-asccomment" onSubmit={this.handleSubmit}  >
          <input
            type="text"
            placeholder="有什么想评价的吗?"
            onChange={this.handleCommentUpdate}
            className="create-comment"
            value={this.state.content}
          />
          <button type="submit">发布</button>
        </form>
    )
  }
}

export default CreateComment;
